import classNames from 'classnames'
import { useMemo, useState } from 'react'
import './index.scss'
import {billTypeToName} from '@/contants/index'
import Icon from '@/components/icon'

const DailyBill = ({date,billList}) => {
    const [showBill,setShowBill] = useState(false)
    const dayTotal = useMemo(() => {
        let pay = 0
        let income = 0
        if (billList) {
            let payList = billList.filter(item => item.type === 'pay')
            let incomeList = billList.filter(item => item.type === 'income')
            pay = payList.length ? payList.reduce((a, c) => a - c.money, 0) : 0
            income = incomeList.length ? incomeList.reduce((a, c) => a + c.money, 0) : 0
        }
        return {
            pay,
            income,
            total: income - pay
        }
    }, [billList])
  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{date}</span>
          <span className={classNames('arrow',showBill && 'expand')} onClick={() =>setShowBill(!showBill)}></span>
        </div>
          <div className="oneLineOverview">
            <div className="pay">
              <span className="type">支出</span>
              <span className="money">{dayTotal.pay}</span>
            </div>
            <div className="income">
              <span className="type">收入</span>
              <span className="money">{dayTotal.income}</span>
            </div>
            <div className="balance">
              <span className="money">{dayTotal.total}</span>
              <span className="type">结余</span>
            </div>
          </div>
          <div className="billList" style={{display: showBill ? 'block' : 'none'}}> 
  {billList.map(item => {
    return (
      <div className="bill" key={item.id}>
        <Icon type={item.useFor}/>
        <div className="detail">
          <div className="billType">{billTypeToName[item.useFor]}</div>
        </div>
        <div className={classNames('money', item.type)}>
          {item.money.toFixed(2)}
        </div>
      </div>
    )
  })}
</div>
     
      </div>
    </div>
  )
}
export default DailyBill